<template>
  <div class="container">
    <!-- 操作按钮 -->
    <div class="actions">
      <button class="btn-add" @click="openAddDialog">
        <span class="icon">+</span> 添加学院
      </button>
    </div>

    <!-- 数据表格 -->
    <div class="table-wrapper">
      <table class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>学院名称</th>
            <th>学院定位</th>
            <th>简介</th>
            <th>主要课程</th>
            <th>学院图片</th>
            <th>图片标语</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td style="width: 60px;">{{ item.name }}</td>
            <td class="td-description">{{ item.profession_location}}</td>
            <td class="td-description">{{ item.profession_profile }}</td>
            <td class="td-description">{{ item.profession_course }}</td>
            <td>
              <img 
                v-if="item.profession_image" 
                :src="item.profession_image" 
                alt="学院图片"
                class="table-image"
              >
              <span v-else>无图片</span>
            </td>
            <td>{{ item.profession_image_text || '-' }}</td>
            <td style="width: 120px;">
              <button class="btn-edit" @click="openEditDialog(item)">编辑</button>
              <button class="btn-delete" @click="handleDelete(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑模态框 -->
    <dialog ref="dialogRef" class="modal-dialog">
      <div class="modal-content">
        <h3>{{ isEditMode ? '修改学院信息' : '添加新学院' }}</h3>
        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label>学院名称：</label>
            <input v-model="formData.name" required>
          </div>
          <div class="form-group">
            <label>学院定位：</label>
            <input v-model="formData.profession_location">
          </div>
          <div class="form-group">
            <label>简介：</label>
            <textarea v-model="formData.profession_profile"></textarea>
          </div>
          <div class="form-group">
            <label>主要课程：</label>
            <input v-model="formData.profession_course">
          </div>
          <div class="form-group">
            <label>图片URL：</label>
            <input v-model="formData.profession_image" type="url">
          </div>
          <div class="form-group">
            <label>图片标语：</label>
            <input v-model="formData.profession_image_text">
          </div>
          <div class="form-actions">
            <button type="button" class="btn-cancel" @click="closeDialog">取消</button>
            <button type="submit" class="btn-confirm">确定</button>
          </div>
        </form>
      </div>
    </dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import http from '@/http'

// 数据状态
const tableData = reactive([])
const dialogRef = ref(null)
const isEditMode = ref(false)
const currentId = ref(null)

// 表单数据
const formData = reactive({
  name: '',
  profession_location: '',
  profession_profile: '',
  profession_course: '',
  profession_image: '',
  profession_image_text: '',
})

// 加载数据
const loadData = () => {
  http.get('profession/')
    .then(res => {
      tableData.splice(0, tableData.length, ...res.data.profession_info)
    })
    .catch(err => {
      console.error('加载数据失败:', err)
    })
}

// 打开添加对话框
const openAddDialog = () => {
  isEditMode.value = false
  resetForm()
  dialogRef.value.showModal()
}

// 打开编辑对话框
const openEditDialog = (item) => {
  isEditMode.value = true
  currentId.value = item.id
  Object.assign(formData, item)
  dialogRef.value.showModal()
}

// 提交表单
const handleSubmit = () => {
  const url = 'profession/'; // 统一使用同一个端点
  const method = isEditMode.value ? 'put' : 'post';

  // 如果是编辑模式，将ID加入表单数据
  if (isEditMode.value) {
    formData.id = currentId.value;
  }

  http[method](url, formData)
    .then(() => {
      loadData();
      closeDialog();
    })
    .catch(err => {
      console.error('提交失败:', err);
    });
}

// 删除数据
const handleDelete = (id) => {
  if (confirm('确定要删除这条记录吗？')) {
    http.delete(`profession/`, {
      data: {id: id}
    })
      .then(() => {
        loadData()
      })
      .catch(err => {
        console.error('删除失败:', err)
      })
  }
}

// 辅助方法
const closeDialog = () => dialogRef.value.close()
const resetForm = () => {
  Object.keys(formData).forEach(key => {
    formData[key] = ''
  })
}

// 初始化加载
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}

.actions {
  margin-bottom: 20px;
}

.btn-add {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.btn-add:hover {
  background-color: #45a049;
}

.icon {
  margin-right: 5px;
  font-weight: bold;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.data-table th, 
.data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

.data-table th {
  background-color: #f8f8f8;
  font-weight: bold;
  color: #333;
}

.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tr:hover {
  background-color: #f1f1f1;
}

.td-description {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.btn-edit, .btn-delete {
  padding: 6px 12px;
  margin: 0 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}

.btn-edit {
  background-color: #2196F3;
  color: white;
}

.btn-delete {
  background-color: #f44336;
  color: white;
}

.btn-edit:hover {
  background-color: #0b7dda;
}

.btn-delete:hover {
  background-color: #da190b;
}

.modal-dialog {
  align-self: center;
  justify-self:center;
  width: 80%;
  max-width: 600px;
  border: none;
  border-radius: 6px;
  padding: 0;
  box-shadow: 0 3px 9px rgba(0,0,0,0.3);
}

.modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  padding: 20px;
}

.modal-content h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group textarea {
  height: 80px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.btn-confirm, .btn-cancel {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-confirm {
  background-color: #4CAF50;
  color: white;
}

.btn-cancel {
  background-color: #f44336;
  color: white;
}

.btn-confirm:hover {
  background-color: #45a049;
}

.btn-cancel:hover {
  background-color: #da190b;
}

@media (max-width: 768px) {
  .data-table {
    font-size: 13px;
  }
  
  .data-table th, 
  .data-table td {
    padding: 8px;
  }
  
  .btn-edit, .btn-delete {
    padding: 4px 8px;
    font-size: 12px;
  }
}
</style>